﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Binding Attributes</title>
    <script type="text/javascript" src="../lib/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="../lib/dumpobj.js"></script>
    <script type="text/javascript" src="../lib/jQXB.1.1.js"></script>
</head>
<body>
    <h1>Binding HTML elements</h1>
    <h2>Change data</h2>
    Main DIV Syle:<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="divstyle" /><br />
    Table width
    <input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tablewidth" /><br />
    Header div title<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tabletitle" /><br />
    Body span text<input type="text" jqxb-datasource="attributesdata" jqxb-datamember="tablebody" /><br />
    <div jqxb-datasource="attributesdata" jqxb-datamember="divstyle" jqxb-bindedattribute="style">
        <table border="1" jqxb-datasource="attributesdata" jqxb-datamember="tablewidth" jqxb-bindedattribute="width">
            <thead>
                <tr>
                    <td>
                        <div jqxb-datasource="attributesdata" jqxb-datamember="tabletitle" jqxb-bindedattribute="html">
                        </div>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <span jqxb-datasource="attributesdata" jqxb-datamember="tablebody" jqxb-bindedattribute="text">
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="button" value="Apply changes" onclick="refresh();" />
    <!-- use jQXB to reflect object changes -->
    <div>
        <textarea jqxb-datasource="mydataDump" jqxb-datamember="object" cols="100" rows="20" ></textarea>
    </div>
    <script type="text/javascript">
        var attributesObject = {
            'divstyle': 'background: white;',
            'tablewidth': '200px',
            'tabletitle': '<strong>Table Title</strong>',
            'tablebody': 'body'
        };

        function refresh() {
            jQXB.refreshControls('attributesdata');
        }

        jQuery(document).ready(function () {
            jQXB.initialize();
            jQXB.setDataSource("attributesdata", attributesObject).doBind("attributesdata");
            var dataDump = new Object();
            dataDump.object = dumpObj(attributesObject, 'Attributes Object', "-", 1);
            jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
            /********
            * this part of code is not part of core example
            * it has been added only for debug and demostration purpos
            */
            jQXB.addOnAfterUpdatehnd(function (datasourceName) {
                switch (datasourceName) {
                    case "attributesdata":
                        dataDump.object = dumpObj(attributesObject, 'Attributes Object', "-", 1);
                        jQXB.setDataSource('mydataDump', dataDump).doBind('mydataDump');
                        break;
                }
            });
            /****
            * End demonstration
            */
        });
 
    </script>
</body>
</html>
